<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    
    <title>GeoExt.LayerOpacitySlider &mdash; GeoExt v1.0</title>
    <link rel="stylesheet" href="../../../_static/geoext.css" type="text/css" />
    <link rel="stylesheet" href="../../../_static/pygments.css" type="text/css" />
    <script type="text/javascript">
      var DOCUMENTATION_OPTIONS = {
        URL_ROOT:    '../../../',
        VERSION:     '1.0',
        COLLAPSE_MODINDEX: false,
        FILE_SUFFIX: '.html',
        HAS_SOURCE:  true
      };
    </script>
    <script type="text/javascript" src="../../../_static/jquery.js"></script>
    <script type="text/javascript" src="../../../_static/doctools.js"></script>
    <link rel="shortcut icon" href="../../../_static/favicon.ico"/>
    <link rel="top" title="GeoExt v1.0" href="../../../index.html" />
    <link rel="up" title="Widgets" href="../widgets.html" />
    <link rel="next" title="GeoExt.LegendImage" href="LegendImage.html" />
    <link rel="prev" title="GeoExt.LayerLegend" href="LayerLegend.html" />
    
    
    
    
    

  </head>
  <body>
    <div class="header">
        <div class="wrap">
            <h1 id="logo"><a href="../../../index.html">GeoExt</a></h1>
            <ul id="top-nav">
                <li class="first"><a href="../../../docs.html">Documentation</a></li>
                <li><a href="../../../examples.html">Examples</a></li>
                <li><a href="../../../downloads.html">Download</a></li>
                <li><a href="http://trac.geoext.org/">Development</a></li>
            </ul>
            <div id="searchbox">
                <form class="search" action="../../../search.html" method="get">
                    <input id="searchbox-query" type="text" name="q" size="25" value="Search &hellip;" tabindex="3" onblur="if(this.value=='') this.value='Search &hellip;';" onfocus="if(this.value=='Search &hellip;') this.value='';" />
                    <input id="searchbox-submit" type="image" value="Search" src="../../../_static/img/search_icon_green.png" />
                    <input type="hidden" name="check_keywords" value="yes" />
                    <input type="hidden" name="area" value="default" />
                </form>
            </div>
        </div>
    </div>

    <div class="related">
      <h3>Navigation</h3>
      <ul>
        <li><a href="../../../index.html">GeoExt</a> &raquo;</li>
          <li><a href="../../index.html" >API Reference</a> &raquo;</li>
          <li><a href="../widgets.html" accesskey="U">Widgets</a> &raquo;</li>
        <li><a href="#"><tt class="docutils literal docutils literal"><span class="pre">GeoExt.LayerOpacitySlider</span></tt></a></li>
      </ul>
    </div>

      <div class="sphinxsidebar">
        <div class="sphinxsidebarwrapper">
            <h3><a href="../../../index.html">Table Of Contents</a></h3>
            <ul>
<li><a class="reference external" href="#"><tt class="docutils literal"><span class="pre">GeoExt.LayerOpacitySlider</span></tt></a><ul>
<li><a class="reference external" href="#example-use">Example Use</a></li>
<li><a class="reference external" href="#config-options">Config Options</a></li>
<li><a class="reference external" href="#public-methods">Public Methods</a></li>
</ul>
</li>
</ul>

            <h4>Previous topic</h4>
            <p class="topless"><a href="LayerLegend.html"
                                  title="previous chapter"><tt class="docutils literal docutils literal docutils literal"><span class="pre">GeoExt.LayerLegend</span></tt></a></p>
            <h4>Next topic</h4>
            <p class="topless"><a href="LegendImage.html"
                                  title="next chapter"><tt class="docutils literal"><span class="pre">GeoExt.LegendImage</span></tt></a></p>
        </div>
      </div>


    <div class="document">
      <div class="documentwrapper">
        <div class="bodywrapper">
          <div class="body">
            
  <div class="section" id="geoext-layeropacityslider">
<h1><a title="GeoExt.LayerOpacitySlider" class="reference internal" href="#GeoExt.LayerOpacitySlider"><tt class="xref docutils literal"><span class="pre">GeoExt.LayerOpacitySlider</span></tt></a><a class="headerlink" href="#geoext-layeropacityslider" title="Permalink to this headline">¶</a></h1>
<dl class="meta docutils">
<dt>Extends</dt>
<dd><ul class="first last simple">
<li><a class="reference external" href="http://dev.sencha.com/deploy/dev/docs/?class=Ext.Slider">Ext.Slider</a></li>
</ul>
</dd>
<dt>xtype</dt>
<dd><tt class="docutils literal"><span class="pre">gx_opacityslider</span></tt></dd>
</dl>
<dl class="class">
<dt id="GeoExt.LayerOpacitySlider">
<em class="property">class </em><tt class="descclassname">GeoExt.</tt><tt class="descname">LayerOpacitySlider</tt><big>(</big><em>config</em><big>)</big><a class="headerlink" href="#GeoExt.LayerOpacitySlider" title="Permalink to this definition">¶</a></dt>
<dd>Create a slider for controlling a layer&#8217;s opacity.</dd></dl>

<div class="section" id="example-use">
<h2>Example Use<a class="headerlink" href="#example-use" title="Permalink to this headline">¶</a></h2>
<p>Sample code to render a slider outside the map viewport:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">slider</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">LayerOpacitySlider</span><span class="p">({</span>
    <span class="nx">renderTo</span><span class="o">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span>
    <span class="nx">width</span><span class="o">:</span> <span class="mi">200</span><span class="p">,</span>
    <span class="nx">layer</span><span class="o">:</span> <span class="nx">layer</span>
<span class="p">});</span>
</pre></div>
</div>
<p>Sample code to add a slider to a map panel:</p>
<div class="highlight-javascript"><div class="highlight"><pre><span class="kd">var</span> <span class="nx">layer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Layer</span><span class="p">.</span><span class="nx">WMS</span><span class="p">(</span>
    <span class="s2">&quot;Global Imagery&quot;</span><span class="p">,</span>
    <span class="s2">&quot;http://maps.opengeo.org/geowebcache/service/wms&quot;</span><span class="p">,</span>
    <span class="p">{</span><span class="nx">layers</span><span class="o">:</span> <span class="s2">&quot;bluemarble&quot;</span><span class="p">}</span>
<span class="p">);</span>
<span class="kd">var</span> <span class="nx">panel</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">GeoExt</span><span class="p">.</span><span class="nx">MapPanel</span><span class="p">({</span>
    <span class="nx">renderTo</span><span class="o">:</span> <span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">,</span>
    <span class="nx">height</span><span class="o">:</span> <span class="mi">300</span><span class="p">,</span>
    <span class="nx">width</span><span class="o">:</span> <span class="mi">400</span><span class="p">,</span>
    <span class="nx">map</span><span class="o">:</span> <span class="p">{</span>
        <span class="nx">controls</span><span class="o">:</span> <span class="p">[</span><span class="k">new</span> <span class="nx">OpenLayers</span><span class="p">.</span><span class="nx">Control</span><span class="p">.</span><span class="nx">Navigation</span><span class="p">()]</span>
    <span class="p">},</span>
    <span class="nx">layers</span><span class="o">:</span> <span class="p">[</span><span class="nx">layer</span><span class="p">],</span>
    <span class="nx">extent</span><span class="o">:</span> <span class="p">[</span><span class="o">-</span><span class="mi">5</span><span class="p">,</span> <span class="mi">35</span><span class="p">,</span> <span class="mi">15</span><span class="p">,</span> <span class="mi">55</span><span class="p">],</span>
    <span class="nx">items</span><span class="o">:</span> <span class="p">[{</span>
        <span class="nx">xtype</span><span class="o">:</span> <span class="s2">&quot;gx_opacityslider&quot;</span><span class="p">,</span>
        <span class="nx">layer</span><span class="o">:</span> <span class="nx">layer</span><span class="p">,</span>
        <span class="nx">aggressive</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
        <span class="nx">vertical</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
        <span class="nx">height</span><span class="o">:</span> <span class="mi">100</span><span class="p">,</span>
        <span class="nx">x</span><span class="o">:</span> <span class="mi">10</span><span class="p">,</span>
        <span class="nx">y</span><span class="o">:</span> <span class="mi">20</span>
    <span class="p">}]</span>
<span class="p">});</span>
</pre></div>
</div>
</div>
<div class="section" id="config-options">
<h2>Config Options<a class="headerlink" href="#config-options" title="Permalink to this headline">¶</a></h2>
<p>Configuration properties in addition to
those listed for <a class="reference external" href="http://dev.sencha.com/deploy/dev/docs/?class=Ext.Slider">Ext.Slider</a>.</p>
<dl class="describe">
<dt>
<tt class="descname">aggressive</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Boolean</span></tt>
If set to true, the opacity is changed as soon as the thumb is moved.
Otherwise when the thumb is released (default).</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">changeVisibility</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Boolean</span></tt>
If set to true, the layer&#8217;s visibility is handled by the
slider, the slider makes the layer invisible when its
value is changed to the min value, and makes the layer
visible again when its value goes from the min value
to some other value. The layer passed to the constructor
must be visible, as its visibility is fully handled by
the slider. Defaults to false.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">changeVisibilityDelay</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Number</span></tt> Time in milliseconds before changing the layer&#8217;s visibility.
If the value changes again within that time, the layer&#8217;s visibility
change does not occur. Only applicable if changeVisibility is true.
Defaults to 5.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">complementaryLayer</tt></dt>
<dd><tt class="docutils literal"><span class="pre">OpenLayers.Layer</span></tt> or <a title="GeoExt.data.LayerRecord" class="reference external" href="../data/LayerRecord.html#GeoExt.data.LayerRecord"><tt class="xref docutils literal"><span class="pre">GeoExt.data.LayerRecord</span></tt></a>
If provided, a layer that will be made invisible (its visibility is
set to false) when the slider value is set to its max value. If this
slider is used to fade visibility between to layers, setting
<tt class="docutils literal"><span class="pre">complementaryLayer</span></tt> and <tt class="docutils literal"><span class="pre">changeVisibility</span></tt> will make sure that
only visible tiles are loaded when the slider is set to its min or max
value. (optional)</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">delay</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Number</span></tt> Time in milliseconds before setting the opacity value to the
layer. If the value change again within that time, the original value
is not set. Only applicable if aggressive is true.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">inverse</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Boolean</span></tt>
If true, we will work with transparency instead of with opacity.
Defaults to false.</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">layer</tt></dt>
<dd><tt class="docutils literal"><span class="pre">OpenLayers.Layer</span></tt> or <a title="GeoExt.data.LayerRecord" class="reference external" href="../data/LayerRecord.html#GeoExt.data.LayerRecord"><tt class="xref docutils literal"><span class="pre">GeoExt.data.LayerRecord</span></tt></a>
The layer this slider changes the opacity of. (required)</dd></dl>

<dl class="describe">
<dt>
<tt class="descname">value</tt></dt>
<dd><tt class="docutils literal"><span class="pre">Number</span></tt>
The value to initialize the slider with. This value is
taken into account only if the layer&#8217;s opacity is null.
If the layer&#8217;s opacity is null and this value is not
defined in the config object then the slider initializes
it to the max value.</dd></dl>

</div>
<div class="section" id="public-methods">
<h2>Public Methods<a class="headerlink" href="#public-methods" title="Permalink to this headline">¶</a></h2>
<p>Public methods in addition to those
listed for <a class="reference external" href="http://dev.sencha.com/deploy/dev/docs/?class=Ext.Slider">Ext.Slider</a>.</p>
<dl class="method">
<dt id="GeoExt.LayerOpacitySlider.setLayer">
<tt class="descclassname">LayerOpacitySlider.</tt><tt class="descname">setLayer</tt><big>(</big><big>)</big><a class="headerlink" href="#GeoExt.LayerOpacitySlider.setLayer" title="Permalink to this definition">¶</a></dt>
<dd><table class="docutils field-list" frame="void" rules="none">
<col class="field-name" />
<col class="field-body" />
<tbody valign="top">
<tr class="field"><th class="field-name">Parameter:</th><td class="field-body"><em>layer</em> &#8211; <tt class="docutils literal"><span class="pre">OpenLayers.Layer</span></tt> or <a title="GeoExt.data.LayerRecord" class="reference external" href="../data/LayerRecord.html#GeoExt.data.LayerRecord"><tt class="xref docutils literal"><span class="pre">GeoExt.data.LayerRecord</span></tt></a></td>
</tr>
</tbody>
</table>
<p>Bind a new layer to the opacity slider.</p>
</dd></dl>

</div>
</div>


          </div>
        </div>
      </div>
      <div class="clearer"></div>
    </div>
    <div class="related">
      <h3>Navigation</h3>
      <ul>
            <li class="right" style="margin-right: 10px">
              <a href="../../../genindex.html" title="General Index"
                 accesskey="I">index</a></li>
            <li class="right" >
              <a href="../../../modindex.html" title="Global Module Index"
                 accesskey="M">modules</a> |</li>
            <li class="right" >
              <a href="LegendImage.html" title="GeoExt.LegendImage"
                 accesskey="N">next</a> |</li>
            <li class="right" >
              <a href="LayerLegend.html" title="GeoExt.LayerLegend"
                 accesskey="P">previous</a> |</li>
        <li><a href="../../../index.html">GeoExt</a> &raquo;</li>
          <li><a href="../../index.html" >API Reference</a> &raquo;</li>
          <li><a href="../widgets.html" >Widgets</a> &raquo;</li>
        <li><a href="#"><tt class="docutils literal docutils literal"><span class="pre">GeoExt.LayerOpacitySlider</span></tt></a></li>
      </ul>
    </div>

    <div class="footer">
      &copy; Copyright 2009-2010, GeoExt Community.
    </div>
  </body>
</html>